<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      :visible="isShowHide"
      width="900px"
      @close="closeDialog"
    >
    <el-row class="text">
        <el-col :span="6">
          <span v-if="listdata.questionType === '1'">【题型】：单选题</span>
          <span v-else-if="listdata.questionType === '2'">【题型】：多选题</span>
          <span v-else>【题型】：简答题</span>
        </el-col>
        <el-col :span="6">
          <span> 【编号】：{{ listdata.id  }}</span>
        </el-col>
        <el-col :span="6">
          <span v-if="listdata.difficulty === '1'">【题型】：简单</span>
          <span v-else-if="listdata.difficulty === '2'">【题型】：一般</span>
          <span v-else>【题型】：困难</span>
        </el-col>
        <el-col :span="6">
          <span> 【标签】：{{ listdata.tags }}</span>
        </el-col>
      </el-row>
      <el-row class="text">
        <el-col :span="6">
          <span>【学科】：{{ listdata.subjectName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【目录】：{{ listdata.directoryName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【方向】：{{ listdata.direction }}</span>
        </el-col>
        <el-col :span="6"> </el-col>
      </el-row>
      <hr />
      <!-- 题干部分 -->
      <el-row>
        <el-col>
          <span>【题干】：
            <!-- 内容 -->
            <el-row>
              <el-col style="color:blue;">
                <div v-html="listdata.question"></div>
              </el-col>
              <!-- 答案 -->
            <el-row>
              <el-col>
                <span>
                  <span v-if="listdata.questionType === '1'">单选题</span>
                  <span v-else-if="listdata.questionType === '2'">多选题</span>
                  <span v-else>简答题</span>选项：（以下选中的选项为正确答案）
                </span>
              </el-col>
            </el-row>
            </el-row>
            <!-- 单选框 -->
            <el-radio-group v-model="getradio" v-if="listdata.questionType === '1'" @change="change">
              <el-row v-for="(item, index) in listdata.options" :key="index" style="margin:10px 0px">
                <el-radio :label="item.isRight">{{ item.title }}</el-radio>
              </el-row>
            </el-radio-group>
            <!-- 多选框 -->
            <div v-if="listdata.questionType === '2'">
              <el-row v-for="(item, index) in options" :key="index" style="margin:10px 0px">
                <el-checkbox v-model="item.isRight" :disabled="item.isRight === 0" @change="testChange(item)"> {{ item.title }} </el-checkbox>
              </el-row>
            </div>
          </span>
        </el-col>
      </el-row>
      <hr />
      【参考答案】：<el-button type="danger" @click="videoVisible = true">视频答案预览</el-button>
      <el-row style="margin-top:20px;" v-if="videoVisible">
        <video :src="listdata.videoURL" controls="controls" class="video"></video>
      </el-row>
      <hr />
      <el-row class="answer">
        <span>【答案解析】: <span v-html="listdata.answer" style="display:inline-block"></span></span>
      </el-row>

      <hr />
      <el-row class="answer">
        <span>
          【题目备注】：{{listdata.remarks}}
        </span>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDialog" style="margin-left:780px">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail as getDetailsApi } from '@/api/hmmm/questions'
export default {
  props: {
    isShowHide: { type: Boolean, required: true },
    usersID: { type: Number, default: 0 }
    // questionItem: { type: Object, required: true }
  },
  data () {
    return {
      getradio: 1,
      minioBaseUrl: '',
      videoVisible: false,
      colon: false,
      listdata: {},
      optionstow: [], // 返回的所有项
      CurrentItem: [], // 当前项
      // isRight: false,
      radio: []
    }
  },
  // created () {
  //   this.detaillist()
  // },
  methods: {
    // change事件
    change () {
      this.getradio = 1
    },
    // 关闭弹窗
    closeDialog () {
      this.$emit('update:isShowHide', false)
    },
    /**
     * 点击视频按钮时video显示
     */
    playvideo () {
      this.$refs.video.style.display = 'block'
    },
    /**
     * 预览的回填数据
     */
    async detaillist () {
      const { data } = await getDetailsApi({ id: this.usersID })
      this.listdata = data
    }
  },
  computed: {
    options () {
      // 先判断是不是多选题
      if (this.listdata.questionType === '2') {
        if (!this.listdata.options) {
          return // 如果没有题目选项停止后续操作
        }
        // 遍历传递过来的题目选项 如果isRight===1 代表该选项是被选中的选项
        this.listdata.options.forEach(element => {
          if (element.isRight === 1) {
            // 将这一项的isRight改为true 多选框就会默认选择
            element.isRight = true
          }
        })
        // 修改完成之后
        return this.listdata.options
      } else {
        // 如果不是单选题 原路返回传递过来的题目项
        return this.listdata.options
      }
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  .video {
    width: 400px;
  }
  .answer {
    padding: 8px 0px;
  }
  .el-row {
    .el-col {
      span {
        font-size: 14px;
        color: #606266;
      }
    }
  }
}
</style>
